<template>
  <div>
    <el-card class="m-20">
      <!-- 头部 -->
      <el-input v-model="username" placeholder="用户名称" style="width: 200px; height: 10px;" class="ml-20"></el-input>
      <el-button type="primary" class="ml-20" icon="el-icon-search" @click="getUserList">查询</el-button>
      <el-button @click="empty">清空</el-button>
      <div class="mt-20">
        <!-- 添加 批量删除 -->
        <el-button type="primary" class="ml-20" @click=" dialogUserVisible = true ;adduser()">添加</el-button>
        <el-button type="danger" :disabled="!Boolean(multipleSelection.length)" @click="Alldelet">批量删除</el-button>
        <!-- 表格 -->
        <el-table :data="UserData" class="mr-20 mt-20 " border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="index" label="序号" width="80" align="center">
            <template slot-scope="scop">
              {{ scop.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名">
          </el-table-column>
          <el-table-column prop="nickName" label="用户昵称">
          </el-table-column>
          <el-table-column prop="roleName" label="角色列表">
          </el-table-column>
          <el-table-column prop="gmtCreate" label="创建时间">
          </el-table-column>
          <el-table-column prop="gmtModified" label="更新时间">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template v-slot="{ row }">
              <el-button type="info" icon="el-icon-user-solid" size="mini" @click="display(row)"></el-button>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="compile(row)"></el-button>
              <el-popconfirm :title="`确定删除 ${row.username} 吗?`" @onConfirm="deletone(row)" class="ml-10">
                <template #reference>
                  <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination class="ml-20" :current-page.sync="Page" :page-size="limit"
          layout="prev, pager, next, jumper,->,sizes,total" :page-sizes="[5, 10, 20, 30]"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" style="padding:20px 0" :total="total">
        </el-pagination>

        <!-- 添加弹框 -->
        <el-dialog title='添加用户' :visible.sync="dialogUserVisible" top="0px">
          <el-form :model="userStateuser">
            <el-form-item label="用户名" label-width="120px">
              <el-input v-model="userStateuser.username" />
            </el-form-item>
            <el-form-item label="用户昵称" label-width="120px">
              <el-input v-model="userStateuser.nickName" />
            </el-form-item>
            <el-form-item label="用户密码" label-width="120px">
              <el-input v-model="userStateuser.password" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogUserVisible = false ; cancel()"> 取 消</el-button>
              <el-button type="primary" @click="conFirm">保 存</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog title='修改' :visible.sync="modificationVisible" top="0px">
          <el-form :model="userStateuser">
            <el-form-item label="用户名" label-width="120px">
              <el-input v-model="userStateuser.username" />
            </el-form-item>
            <el-form-item label="用户昵称" label-width="120px">
              <el-input v-model="userStateuser.nickName" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="modificationVisible = false"> 取 消</el-button>
              <el-button type="primary" @click="conFirm">保 存</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 展示弹框 -->
        <el-dialog title='设置角色' :visible.sync="displayVisible" top="0px">
          <el-form :model="userStateuser">
            <el-form-item label="用户名" label-width="80px">
              <el-input disabled :value="userStateuser.username" />
            </el-form-item>
            <el-form-item label="角色列表" label-width="80px">
              <el-checkbox :indeterminate="elcheckbox.isIndeterminate" v-model="elcheckbox.checkAll"
                @change="handleCheckAllChange">全选</el-checkbox>
              <div style="margin: 20px 0;"></div>
              <el-form-item>
                <el-checkbox-group v-model="elcheckbox.roleList.roleName" >
                  <el-checkbox-group :disabled="true"  >
                    <el-checkbox v-for="item in elcheckbox.roleList" :label="item.id" :key="item.id">{{ item.roleName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-checkbox-group>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

    </el-card>
  </div>
</template>

<script>
import { getUserListApi, saveOrUpdateUserApi, getUserRoleListApi, removeUserApi } from '@/api/acl'

export default {
  name: 'User',

  methods: {
    handleSizeChange(val) {
      this.limit = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      this.Page = val
      this.getUserList()
    },
    //清除
    empty() {
      this.username = ''
      this.getUserList()
    },
    //取消
    cancel() {
      this.userStateuser.username = ''
      this.userStateuser.nickName = ''
      this.userStateuser.password = ''
    },
    //添加
    adduser(){
      this.cancel()
    },
    // 设置角色
    async display(row) {
      this.displayVisible = true    //展示弹窗
      await this.getUserRoleList(row.id) //获取当前用户信息
      this.userStateuser.username = row.username //同步用户名
      this.userStateuser.id = row.id//获取当前用户ID
      await this.getUserList()

    },
    //修改
    async compile(row) {
      this.userStateuser.id = row.id
      this.userStateuser = { ...row }
      this.modificationVisible = true
    },
    //删除
    async deletone(row) {
      await removeUserApi(row.id)
      this.getUserList()
    },

    //表格中勾选按钮回调
    handleSelectionChange(val) {
      this.multipleSelection = val

    },
    //批量删除
    async Alldelet() {
      let arr = this.multipleSelection.map(function (item, index, arr) {
        return item.id
      })
      arr.forEach(async function (item) {
        await removeUserApi(item)
      })
      this.getUserList()
      this.getUserList()
    },
    //全选
    handleCheckAllChange(value) {// value 当前勾选状态true/false

    },
    //保存
    async conFirm() {
      let { username, nickName, password, id } = this.userStateuser
      if (username && nickName) {
        await saveOrUpdateUserApi({ username, nickName, password, id })
        this.$message({
          message: '成功',
          type: 'success'
        });
        this.getUserList()
        this.cancel()
        this.dialogUserVisible = false
        this.modificationVisible = false
      } else {
        this.$message.error('请不全信息');
      }
    },

    //获取列表
    async getUserList() {
      const { Page, limit, username } = this;
      let res = await getUserListApi(Page, limit, { username: username })
      this.UserData = res.data.items
      this.total = res.data.total
    },
    //获取用户角色列表
    async getUserRoleList(userId) {
      let res = await getUserRoleListApi(userId)
      this.elcheckbox.roleList = res.data.assignRoles
    }
  },
  data() {
    return {
      input: '',//输入框
      Page: 1,//当前页码
      total: 100,//总条数
      limit: 5,// 每页记录数
      username: '',
      multipleSelection: [], //记录勾选的数据,
      UserData: [],//用户数据
      currentPage4: 4,
      dialogUserVisible: false,//添加控制弹框开关
      displayVisible: false,//展示设置角色弹窗开关
      modificationVisible: false,
      userStateuser: {//新增
        username: '',
        nickName: '',
        password: '',
        id: ''
      },
      elcheckbox: {
        username: '', //用户名
        userId: '', //用户ID
        roleList: [],//选项数据

      }

    }
  },
  mounted() {
    this.getUserList()
  }

}
</script>

<style lang="less" scoped>

</style>